Introduction

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a webpage and is used to organize and format content.

HTML consists of a series of elements which you use to enclose, or wrap, different parts of the content to make it appear or act in a certain way.

What you should already know

This guide assumes you have the following basic background:

A basic understanding of how the Internet works.
Basic familiarity with using a web browser.

HTML Basics

HTML uses a set of elements to structure content. Each element has a meaning and purpose.

A basic HTML document starts with a doctype declaration followed by the html, head, and body elements.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Elements

HTML elements are building blocks of HTML. An element is defined by a start tag, some content, and an end tag.

Example:

<p>This is a paragraph.</p>

Attributes

HTML attributes provide additional information about HTML elements. Attributes are always included in the opening tag and usually come in name/value pairs.

Example:

<a href="https://www.example.com">This is a link</a>

Forms

Forms are used to collect user input. Form elements include input fields, checkboxes, radio buttons, submit buttons, etc.

Example:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

Tables

HTML tables are used to display tabular data. A table is defined using the <table> element and contains rows and columns.

Example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
</table>

Semantic HTML

Semantic HTML elements clearly describe their meaning in a human- and machine-readable way. Examples include <article>, <section>, <nav>, <header>, and <footer>.

Example:

<article>
  <header>
    <h1>Article Title</h1>
  </header>
  <p>This is an article.</p>
</article>

Media Elements

HTML supports various media elements like images, audio, and video. These elements allow you to embed multimedia into your web pages.

Examples:

<img src="image.jpg" alt="Description of image">
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

HTML5

HTML5 is the latest version of HTML, which includes new elements, attributes, and behaviors, as well as a larger set of technologies that allow for more diverse and powerful web applications.

New elements include:

<header>
<footer>
<article>
<section>
<nav>

Best Practices

Writing clean, semantic HTML helps improve accessibility, search engine optimization, and maintainability of your code.

Some best practices include:

Use semantic elements appropriately.
Keep your HTML well-structured and organized.
Validate your HTML to ensure it meets web standards.

Reference

All the documentation in this page is taken from MDN